<template>
    <div class="app-container">
      <el-form :inline="true" class="demo-form-inline">
        <!-- 标题 -->
        <el-form-item>
          <el-input v-model="searchObj.title" placeholder="标题"/>
        </el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="fetchData()">查询</el-button>
        <el-button type="default" @click="resetData()">清空</el-button>
        <el-button type="primary" @click="add()">添加</el-button>
      </el-form>
  
      <!-- 表格 -->
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="数据加载中"
        border
        fit
        highlight-current-row
        row-class-name="myClassList">
        <el-table-column
          label="序号"
          width="70"
          align="center">
  
          <template slot-scope="scope">
            {{ (page - 1) * limit + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="标题"  align="center" prop="title">
        </el-table-column>
        <el-table-column label="banner图" width="470" align="center">
          <template slot-scope="scope">
            <img :src="scope.row.imageUrl"  width="150px">
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.gmtCreate.substr(0, 10) }}
          </template>
        </el-table-column>
        <el-table-column label="修改时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.gmtModified.substr(0, 10) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="mini" icon="el-icon-edit-outline" @click="updateData(scope.row)">编辑</el-button>
            <el-button type="text" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        :current-page="page"
        :page-size="limit"
        :total="total"
        style="padding: 30px 0; text-align: center;"
        layout="total, prev, pager, next, jumper"
        @current-change="fetchData"
      />
      <bannerFrom ref="banner" @data-updated="fetchData"/><!-- 监听自定义事件 -->
    </div>
  </template>
  
  <script>
    import banner from '@/api/cms/banner'
    import bannerFrom from '@/views/cms/banner/form'
      export default {
        components:{
          bannerFrom,
        },
         data(){
           return{
             listLoading:false,
             searchObj:{
               title:''
             },
             list:null,
             total: 0, // 总记录数
             page: 1, // 页码
             limit: 10, // 每页记录数
           }
         },
        created() {
          this.fetchData();
        },
        methods:{
          fetchData(page=1){
            // 调用api层获取数据库中的数据
            console.log('加载列表')
            // 当点击分页组件的切换按钮的时候，会传输一个当前页码的参数page
            // 解决分页无效问题
            this.page = page
            this.listLoading = true
            banner.getPageList(this.page, this.limit, this.searchObj).then(response => {
              // debugger 设置断点调试
              if (response.success === true) {
                this.list = response.data.items
                this.total = response.data.total
              }
              this.listLoading = false
            })
          },
          resetData() {
            this.searchObj = {}
            this.fetchData()
          },
          removeDataById(id) {
            // debugger
            this.$confirm('此操作将永久删除banner图，是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              return banner.removeById(id)
            }).then(() => {
              this.fetchData()
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            }).catch((response) => { // 失败
              if (response === 'cancel') {
                this.$message({
                  type: 'info',
                  message: '已取消删除'
                })
              }
            })
          },
          add(){
            this.$refs.banner.openDialog()
          },
          updateData(item){
            this.$refs.banner.openDialog(item)
          }
        }
      }
  </script>
  
  <style scoped>
    .myClassList .info {
      width: 450px;
      overflow: hidden;
    }
    .myClassList .info .pic {
      width: 150px;
      height: 90px;
      overflow: hidden;
      float: left;
    }
    .myClassList .info .pic a {
      display: block;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    .myClassList .info .pic img {
      display: block;
      width: 100%;
    }
  
    .myClassList td .info .title {
      width: 280px;
      float: right;
      height: 90px;
    }
    .myClassList td .info .title a {
      display: block;
      height: 48px;
      line-height: 24px;
      overflow: hidden;
      color: #00baf2;
      margin-bottom: 12px;
    }
  
    .myClassList td .info .title p {
      line-height: 20px;
      margin-top: 5px;
      color: #818181;
    }
  </style>
  